<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增教师')" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-teacher-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">教师编码：</label>
                <div class="col-sm-8">
                    <input name="teacherCode" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">教师姓名：</label>
                <div class="col-sm-8">
                    <input name="teacherName" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">教师专业：</label>
                <div class="col-sm-8">
                    <input name="professional" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">教师教龄：</label>
                <div class="col-sm-8">
                    <input name="teachAge" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">证件照：</label>
                <div class="col-sm-8">

                    <input name="teacherPicture" id="pic" class="form-control" type="hidden">
                    <!--预览上传的图片-->
                    <!--<div th:width="90px" th:height="90px">
                        <a id="url" th:href="@{'http://www.baidu.com'}">预览图片</a>
                    </div>-->

                    <a id="url"><img th:src="@{src}" style="width: 90px;height: 90px"></a>

                    <!--<a id="url"><img th:src="*{teacherPicture}" style="width: 90px;height: 90px"></a>-->

                    <!--<a id="url"><img src="../static/img/yl.jpg" th:src = "@{/img/yl.jpg}" style="width: 90px;height: 90px"></a>-->
                    <input type="file" id="abc">


                   <!-- <input name="teacherPicture" id="pic" th:field="*{teacherPicture}" class="form-control" type="hidden">
                    <a id="url"><img th:src="*{teacherPicture}" style="width: 90px;height: 90px"></a>
                    <input type="file" id="teacherPicture">-->

                    <!--<input type="hidden" name="teacherPicture">
                    <div class="file-loading">
                        <input class="form-control file-upload" id="teacherPicture" name="file" type="file">
                    </div>-->
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">职称编码：</label>
                <div class="col-sm-8">
                    <select class="form-control m-b" id="titleCode" name="titleCode">
                        <option th:each="v : ${all}" th:text="${v.titleName}" th:value="${v.titleCode}"></option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "system/teacher"
        $("#form-teacher-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-teacher-add').serialize());
            }
        }

        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })

        // 上传图片
        $("#abc").change(function () {
            var data = new FormData();
            data.append("file", $("#abc")[0].files[0]);
            $.ajax({
                type: "POST",
                url: ctx + "common/upload",
                data: data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(result) {
                    //弹出测试
                     //alert(JSON.stringify(result))
                    if (result.code == web_status.SUCCESS) {
                        $("#url img").attr("src",result.url)

                        //$("#url").attr("href",result.url)
                        //console.info("=====================>"+result.url)
                        $("#pic").val(result.fileName)
                    }
                },
                error: function(error) {
                    alert("图片上传失败。");
                }
            });
        })


    </script>
</body>
</html>